<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
    <!-- 车辆基本信息 -->
    <div class="bg-white p-4 border-b">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <button class="mr-3">
                    <i class="fas fa-arrow-left text-gray-600"></i>
                </button>
                <h1 class="text-lg font-semibold text-gray-800">车辆详情</h1>
            </div>
            <button class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                <i class="fas fa-ellipsis-h text-gray-600"></i>
            </button>
        </div>
        
        <div class="flex items-center mb-4">
            <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?w=80&h=80&fit=crop&crop=center" alt="BMW X5" class="w-20 h-20 rounded-xl object-cover mr-4">
            <div class="flex-1">
                <h2 class="text-xl font-bold text-gray-800 mb-1">BMW X5 2020款</h2>
                <p class="text-gray-500 text-sm mb-2">车牌号：京A12345</p>
                <div class="flex items-center">
                    <span class="px-3 py-1 bg-blue-100 text-blue-600 text-sm rounded-full">采购中</span>
                    <span class="ml-2 text-xs text-gray-500">已处理 2/8 项</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 流程进度 -->
    <div class="bg-white p-4 mb-4">
        <h3 class="font-semibold text-gray-800 mb-4">流程进度</h3>
        <div class="space-y-4">
            <!-- 采购阶段 -->
            <div class="flex items-center">
                <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-check text-white text-xs"></i>
                </div>
                <div class="flex-1">
                    <div class="flex items-center justify-between">
                        <span class="font-medium text-gray-800">采购阶段</span>
                        <span class="text-xs text-green-600">已完成</span>
                    </div>
                    <div class="text-xs text-gray-500 mt-1">采购员：张经理 | 完成时间：2024-01-15</div>
                </div>
            </div>

            <!-- 检测阶段 -->
            <div class="flex items-center">
                <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-spinner fa-spin text-white text-xs"></i>
                </div>
                <div class="flex-1">
                    <div class="flex items-center justify-between">
                        <span class="font-medium text-gray-800">检测阶段</span>
                        <span class="text-xs text-blue-600">进行中</span>
                    </div>
                    <div class="text-xs text-gray-500 mt-1">查博士检测 | 预计完成：今天</div>
                    <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                        <div class="bg-blue-600 h-2 rounded-full" style="width: 80%"></div>
                    </div>
                </div>
            </div>

            <!-- 交易阶段 -->
            <div class="flex items-center opacity-50">
                <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center mr-3">
                    <span class="text-gray-500 text-xs">3</span>
                </div>
                <div class="flex-1">
                    <div class="flex items-center justify-between">
                        <span class="font-medium text-gray-500">交易阶段</span>
                        <span class="text-xs text-gray-400">待处理</span>
                    </div>
                    <div class="text-xs text-gray-400 mt-1">代驾取车 | 财务打款</div>
                </div>
            </div>

            <!-- 数据录入 -->
            <div class="flex items-center opacity-50">
                <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center mr-3">
                    <span class="text-gray-500 text-xs">4</span>
                </div>
                <div class="flex-1">
                    <div class="flex items-center justify-between">
                        <span class="font-medium text-gray-500">数据录入</span>
                        <span class="text-xs text-gray-400">待处理</span>
                    </div>
                    <div class="text-xs text-gray-400 mt-1">金蝶ERP系统录入</div>
                </div>
            </div>

            <!-- 过户处理 -->
            <div class="flex items-center opacity-50">
                <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center mr-3">
                    <span class="text-gray-500 text-xs">5</span>
                </div>
                <div class="flex-1">
                    <div class="flex items-center justify-between">
                        <span class="font-medium text-gray-500">过户处理</span>
                        <span class="text-xs text-gray-400">待处理</span>
                    </div>
                    <div class="text-xs text-gray-400 mt-1">服务站过户 | 资料管理</div>
                </div>
            </div>

            <!-- 出口准备 -->
            <div class="flex items-center opacity-50">
                <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center mr-3">
                    <span class="text-gray-500 text-xs">6</span>
                </div>
                <div class="flex-1">
                    <div class="flex items-center justify-between">
                        <span class="font-medium text-gray-500">出口准备</span>
                        <span class="text-xs text-gray-400">待处理</span>
                    </div>
                    <div class="text-xs text-gray-400 mt-1">码头分配 | 物流安排</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 车辆信息 -->
    <div class="bg-white p-4 mb-4">
        <h3 class="font-semibold text-gray-800 mb-4">车辆信息</h3>
        <div class="grid grid-cols-2 gap-4">
            <div>
                <div class="text-xs text-gray-500">品牌型号</div>
                <div class="text-sm font-medium text-gray-800">BMW X5 2020款</div>
            </div>
            <div>
                <div class="text-xs text-gray-500">车牌号码</div>
                <div class="text-sm font-medium text-gray-800">京A12345</div>
            </div>
            <div>
                <div class="text-xs text-gray-500">车架号</div>
                <div class="text-sm font-medium text-gray-800">WBA5A7C50FD123456</div>
            </div>
            <div>
                <div class="text-xs text-gray-500">发动机号</div>
                <div class="text-sm font-medium text-gray-800">B58B30M1</div>
            </div>
            <div>
                <div class="text-xs text-gray-500">颜色</div>
                <div class="text-sm font-medium text-gray-800">碳黑色</div>
            </div>
            <div>
                <div class="text-xs text-gray-500">里程数</div>
                <div class="text-sm font-medium text-gray-800">45,000 km</div>
            </div>
            <div>
                <div class="text-xs text-gray-500">采购价格</div>
                <div class="text-sm font-medium text-gray-800">¥458,000</div>
            </div>
            <div>
                <div class="text-xs text-gray-500">检测等级</div>
                <div class="text-sm font-medium text-blue-600">S级</div>
            </div>
        </div>
    </div>

    <!-- 检测报告 -->
    <div class="bg-white p-4 mb-4">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-semibold text-gray-800">检测报告</h3>
            <button class="text-blue-600 text-sm">查看详情</button>
        </div>
        <div class="bg-blue-50 rounded-lg p-4">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center">
                    <i class="fas fa-clipboard-check text-blue-600 mr-2"></i>
                    <span class="font-medium text-gray-800">查博士检测报告</span>
                </div>
                <span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded">进行中</span>
            </div>
            <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <div class="text-gray-500">检测项目</div>
                    <div class="font-medium">外观/内饰/机械/电子</div>
                </div>
                <div>
                    <div class="text-gray-500">检测进度</div>
                    <div class="font-medium text-blue-600">80%</div>
                </div>
                <div>
                    <div class="text-gray-500">预计完成</div>
                    <div class="font-medium">今天 18:00</div>
                </div>
                <div>
                    <div class="text-gray-500">检测员</div>
                    <div class="font-medium">李师傅</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 资料清单 -->
    <div class="bg-white p-4 mb-4">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-semibold text-gray-800">资料清单</h3>
            <button class="text-blue-600 text-sm">管理资料</button>
        </div>
        <div class="space-y-3">
            <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-600 mr-3"></i>
                    <span class="text-sm text-gray-800">绿本</span>
                </div>
                <span class="text-xs text-green-600">已上传</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-600 mr-3"></i>
                    <span class="text-sm text-gray-800">保险单</span>
                </div>
                <span class="text-xs text-green-600">已上传</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-clock text-yellow-600 mr-3"></i>
                    <span class="text-sm text-gray-800">行驶证</span>
                </div>
                <span class="text-xs text-yellow-600">等待中</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-times-circle text-red-600 mr-3"></i>
                    <span class="text-sm text-gray-800">过户委托书</span>
                </div>
                <span class="text-xs text-red-600">缺失</span>
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="p-4 space-y-3">
        <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium">
            更新检测状态
        </button>
        <button class="w-full bg-gray-100 text-gray-700 py-3 rounded-lg font-medium">
            联系检测员
        </button>
        <button class="w-full bg-gray-100 text-gray-700 py-3 rounded-lg font-medium">
            查看完整报告
        </button>
    </div>
</body>
</html> 